<template>
	<uni-forms ref="loginRef" class="login-container" :model="formData">
		<image class="logo" src="/static/logo.png"></image>

		<uni-forms-item :rules="[{required:true,errorMessage:'用户名必填'}]" label-width="0" name="username">
			<uni-easyinput prefixIcon="person-filled" class="input" v-model="formData.username" type="text" placeholder="请输入用户名" />
		</uni-forms-item>

		<uni-forms-item label-width="0"  :rules="[{required:true,errorMessage:'密码必填'}]" name="password">
			<uni-easyinput prefixIcon="locked-filled" confirm-type="done" @confirm="submit" v-model="formData.password" class="input"
				type="password" placeholder="请输入密码" />
		</uni-forms-item>

		<button size="mini" class="login-button" hover-class="active" @click="submit">
			<span class="lg">登录</span>
		</button>
	</uni-forms>
</template>

<script setup>
	import { ref } from "vue"
	import { loginApi } from "@/api/users.js"
	import useUser from "@/store/users.js"

	let formData = ref({
		username: "",
		password: ""
	})

	let userStore = useUser()

	//表单组件的引用
	let loginRef = ref()

	// let username = ref("")

	// let password = ref("")



	let submit = (refCom) => {
		// console.log(loginRef)
		loginRef.value.validate(async (err, value) => {
			// console.log('err---', err)
			// console.log('value---', value)
			if (!err) {
				uni.showToast({
					title: "正在登入",
					icon: 'loading'
				})
				// console.log(username.value)
				// console.log(password.value)
				try {
					let res = await loginApi(formData.value.username, formData.value.password)
					// console.log(res)
					//存储信息
					uni.setStorageSync("myx-token", res.token)
					userStore.userInfo = res.userInfo
					//跳转页面
					uni.reLaunch({
						url: "/pages/tabBar/home/home",
						complete() {
							//关闭loading动画
							uni.hideToast()
						}
					})
				} catch (e) {
					console.log(e)
				}

			}
		})

		return
		//打开加载弹框

	}
</script>

<style scoped>
	/* 样式可以根据自己的需求进行定制 */
	.uni-forms {
		padding-top: 5vh;
		
	}
	:deep(uni-form) span {
		display: flex;
		justify-content:center;
		align-items:center;
		flex-direction: column;
	}
	

	.logo {
		width: 100px;
		height: 100px;
		margin-bottom: 20px;
	}

	.active {
		background:linear-gradient(30deg,#ff000b,#f973cb) !important;
	}

	.uni-forms-item {	
		width:80%;
	}

	.login-button {
		height: 40px;
		/* display: flex;
		direction: column;
		align-items: center;
		justify-content: center; */
		font-size: 16px;
		width: 80%;
		background-image:linear-gradient(30deg,#1373c6,#47bd00);
		color: #fff;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	.login-button .lg {
		display: inline-block;
		line-height: 35px;
	}
</style>